<script lang="ts" setup>
import { showToast } from '@/utils'

const emit = defineEmits<{
  (e: 'confirm'): void
}>()

const isAgree = ref(false)
const popup = ref()
const show = () => {
  popup.value.open()
}

const close = () => {
  popup.value.close()
}

const confirm = () => {
  if (isAgree.value) {
    emit('confirm')
    close()
  }
  else {
    showToast({
      title: '请勾选同意《用户服务协议》《小程序隐私协议》《隐私政策》',
    })
  }
}

const handleOpenPrivacyContract = () => {
  // @ts-expect-error  打开隐私协议页面
  wx.openPrivacyContract({
    success: () => { }, // 打开成功
    fail: () => { }, // 打开失败
    complete: () => { },
  })
}

defineExpose({
  show,
  close,
})
</script>

<template>
  <uni-popup ref="popup" type="dialog" :is-mask-click="false" @touchmove.stop.prevent="">
    <view class="bg-white rounded-16rpx w580rpx py-36rpx">
      <view class="text-center font-600 mb-24rpx text-26rpx">
        协议与隐私政策
      </view>
      <view class="text-24rpx px36rpx">
        欢迎来到猪小镇·金牌猪脚饭！我们根据最新法律法规、监管政策，更新了<text class="text-[#ff0000]">
          《用户服务协议》
        </text><text class="text-[#ff0000]" @click.stop="handleOpenPrivacyContract">
          《小程序隐私协议》
        </text>和<text class="text-[#ff0000] ">
          《隐私政策》
        </text>，请您认真阅读。
      </view>
      <view class="text-24rpx flex items-center flex-wrap py-20rpx px36rpx" @click="isAgree = !isAgree">
        <image
          :src="isAgree ? '../static/weixuanzhong.png' : '../static/xuanzhong.png'"
          class="w-28rpx h-28rpx pr-20rpx"
        />
        同意以上协议及政策
      </view>
      <button
        id="agree-btn"
        class="bg-[#ff0000] h-72rpx leading-72rpx text-28rpx text-center text-white rounded-8rpx mx-36rpx"
        open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="confirm"
      >
        同意
      </button>
      <navigator open-type="exit" target="miniProgram" class="text-center mt-10rpx text-24rpx text-[#ccc]">
        退出
      </navigator>
    </view>
  </uni-popup>
</template>
